<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Toggle组件演示</title>
<link href="../../css/bootstrap3.css" rel="stylesheet">
<link href="../../css/font-awesome.css" rel="stylesheet">
<link href="../../css/koala.css" rel="stylesheet">
<script src="../../js/jquery.js" type="text/javascript"></script>
<script src="../../lib/Koala_Toggle.js" type="text/javascript"></script>
</head>
<body>
<div class="container" data-role="toggle-container">
<div class="content" data-role="toggle-content">
<pre>
&lt;script&gt;

    $(function(){
        var columns = [
                {title : "角色名称",name : "name",width : 250}, 
                {title : "角色描述",name : "roleDesc",width : 250}
                ];
        var buttons = [
                {content: '&lt;button class="btn btn-primary" type="button"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;span&gt;创建&lt;/button&gt;', action: 'add'},
                {content: '&lt;button class="btn btn-success" type="button"&gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt;&nbsp;修改&lt;/button&gt;', action: 'modify'},
                {content: '&lt;button class="btn btn-danger" type="button"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&nbsp;删除&lt;/button&gt;', action: 'delete'}
                ];

        $("#myGrid").grid({
            identity: 'id',
            columns: columns,
            buttons: buttons,
            querys: [{title: '角色名称', value: 'name'},{title: '角色描述', value: 'roleDesc'}],
            isUserLocalData:true,			//如果为false，则发送ajax请求到url端，获取数据，否则，则视为获取静态数据
            url:"../common/data.js",
            localData:staticData
            ,isShowIndexCol:true
            //,lockWidth: true
        }).on({
            'add': function(){
                alert("add action");
            },
            'modify': function(event, data){
                alert("modify action");
            },
            'delete': function(event, data){
                alert('delete action');
            }
        });
    })
&lt;/script&gt;
</pre>
</div>
</div>
</body>
</html>